<template>
        <div class="top-column">
              <div class="top-column-content">
                <div class="top-left">
                  <div class="logo"></div>
                  <div class="font-api">云漫API</div>
                </div>
                <div class="top-right">
                  <i class="iconfont font-size-right">&#xe63e;</i>
                  <div class="avatar">
                    <img src="@/assets/images/girl.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
</template>
    
<script setup lang='ts'>
    
</script>
    
<style lang="scss" scoped>
    .top-column {
  background-color: #fff;
  width: 100%;
  height: 51px;
  display: flex;
  justify-content: center;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
  margin-bottom: 7px;
  .top-column-content {
    width: 100%;
    // height: 81px;
    display: flex;
    justify-content: space-between;
    .top-left {
      width: 140px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo {
        padding-left: 10px;
        width: 44px;
        height: 47px;
        background: url("@/assets/images/logo.png") no-repeat center;
        background-size: contain;
      }
      .font-api {
        width: 89px;
        height: 24px;
        font-size: 24px;
        color: #969799;
      }
    }
    .top-right {
      width: 128px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .font-size-right {
        width: 35px;
        height: 35px;
        font-size: 35px;
        padding-left: 10px;
      }
      .avatar {
        width: 50px;
        height: 50px;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }
  }
}
</style>